<template>
	<view id="mineBox">
		<my-top :isback="true" :isline="true"></my-top>
		<view class="">
			<view class="mine-header">
				<i @click="back" class="iconfont todayfanhui"></i>
				<text @click="registered">
					注册
				</text>
			</view>
			<my-mine-title style="margin-top: 40rpx;"></my-mine-title>
			<!-- 输入框 -->
			<view class="inputBox">
				<view class="accountdBox">
					<input :style="{width:!noUserName ? '100%' : '70%'}" maxlength="11" v-model="form.phone" class="ipt ipt1" type="<text></text>"
					 placeholder="请输入账号" />
					<view v-if="noUserName" class="registered">
						<text>
							对不起您输入的账号不存在。
						</text>
						<text class="goregistered">去注册</text>
					</view>
				</view>
				<view class="pasdwordBox">
					<input style="outline: none;" v-model="form.password" class="ipt ipt2" :type="pasdShow" placeholder="输入6-16位密码"></input>
					<view @click="seePasd" class="seepassword">
						<!-- <image  src="../../../static/img/seepasd.png" style="height: 100%;" mode=""></image> -->
						<text v-if="pasdShow == 'text'" class="iconfont todayzhengyan fongSize"></text>
						<text v-else  class="iconfont todaybiyan fongSize"></text>
						<!-- <image v-else src="../../../static/img/seepsd.png" style="height: 100%;" mode=""></image> -->
					</view>
				</view>
				<button @click="login" type="default" class="loginButton">登录</button>
				<view class="other">
					<text @click="usercode">使用验证码登录</text>
					<text @click="forgotPasd">忘记密码？</text>
				</view>
			</view>
		</view>
		<view class="wxlogin">
			<view class="otherLogin">
				其他登录方式
			</view>
			<view class="wx">
				<image src="../../../static/img/wx.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setUserInfo
	} from "@/utils/loginCode.js"
	import {
		AccountPwdLogin
	} from "@/api/api.js"
	export default {
		props: {
			isback: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				pasdShow: "password",
				noUserName: false,
				form: {
					phone: null,
					password: null
				}
			};
		},

		onLoad() {},
		methods: {
			forgotPasd() {
				uni.navigateTo({
					url: "forgotPassword",
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			registered() {
				uni.navigateTo({
					url: "registered"
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 查看输入密码
			seePasd() {
				if (this.pasdShow == "password") {
					this.pasdShow = "text"
				} else {
					this.pasdShow = "password"
				}
			},
			login() {
				if (!this.form.phone && !this.form.password) {
					uni.showToast({
						title: "请输入账号和密码",
						icon: "none"
					})

					return
				} else if (!this.form.phone) {
					uni.showToast({
						title: "请输入账号",
						icon: "none"
					})
					return
				} else if (!this.form.password) {
					uni.showToast({
						title: "请输入密码",
						icon: "none"
					})
					return
				}
				try {
					let reg = this.reg(this.form.phone);
					if (!reg) {
						uni.showToast({
							title: "手机号码格式不正确！",
							icon: "none"
						})
					} else {
						AccountPwdLogin(this.form).then(res => {
							if (res.statusCode == 200 && res.data.code == 0) {
								uni.showToast({
									title: "登录成功",
									icon: "none"
								})
								// 存入本地
								setUserInfo(res.data.data.userTb)
								//用户信息存入vuex
								this.$store.commit("initData/setUserInfo", res.data.data.userTb)
								uni.switchTab({
									url: "../../mine/index"
								})
							} else {
								if (res.data.msg == "手机号不存在") {
									this.noUserName = true
								}
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
							}
						})
					}
				} catch (e) {
					uni.showToast({
						title: "请重试",
						icon: "none"
					})
				}
			},
			reg(val) {
				return /^1(3|4|5|6|7|8|9)\d{9}$/.test(val)
			},
			// 跳转验证码登陆界面
			usercode() {
				uni.navigateTo({
					url: "codelogin"
				})
			},
			back() {
				if (this.isback) {
					this.$emit('back');
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.fongSize{
		font-size: 32rpx;
		color:$today-calender-color;
	}
	.goregistered{
		font-size: 22rpx;
			color: #F93434;
	}
	.wx {
		width: 100%;
		height: 100rpx;
		text-align: center;
		margin-top: 48rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.registered {
		width: 100%;
		color: #F93434;
		font-size: 22rpx;
		text-align: right;
		height: 60rpx;
		line-height: 60rpx;
		
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.otherLogin {
		text-align: center;
		color: #999999;
		font-size: 28rpx;
	}

	.otherLogin:before {
		content: '';
		width: 219rpx;
		height: 1px;
		border-bottom: 1px dashed #DDDDDD;
		display: inline-block;
		margin-right: 24rpx;
		margin-bottom: 10rpx;
	}

	.otherLogin:after {
		content: '';
		width: 219rpx;
		height: 1px;
		border-bottom: 1px dashed #DDDDDD;
		display: inline-block;
		margin-left: 24rpx;
		margin-bottom: 10rpx;
	}

	.wxlogin {
		width: 100%;
		padding: 0 48rpx;
		height: auto;
	}

	.other {
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999999;
		font-size: 28rpx;
	}

	.seepassword {
		width: 40rpx;
		height: 32rpx;
	}

	.accountdBox {
		display: flex;
		margin-top: 28rpx;
		border-bottom: 1px dashed #DDDDDD;
		justify-content: space-between;
		align-items: center;
	}

	.pasdwordBox {
		display: flex;
		margin-top: 28rpx;
		border-bottom: 1px dashed #DDDDDD;
		justify-content: space-between;
		align-items: center;
	}

	.button-hover {
		background: rgba(4, 161, 251, .8) !important;
	}

	.loginButton {
		margin-top: 48rpx;
		background-color: #4A83F1;
		color: #FFFFFF !important;
		font-size: 44rpx;
		border-radius: 20rpx;
	}

	.ipt {
		height: 61rpx;
		font-size: 32rpx;
		background:none;  
			outline:none;  
			color: $today-calender-color;
			border:none;
	}

	.ipt2 {
		width: 90%;
		background:none;
			outline:none;  
			color: $today-calender-color;
			border:none;
	}

	.inputBox {
		width: 100%;
		padding: 0 48rpx;
		margin-top: 100rpx;
		height: 622rpx;
	}

	.mine-header {
		width: 100%;
		padding: 0 48rpx;
		display: flex;
		justify-content: space-between;
		height: 88rpx;
		align-items: center;
		font-size: 40rpx;
		color: $today-calender-color;
		text{
			color: $today-calender-color;
		}
	}

	#mineBox {
		height: 100%;
		min-height: 100vh;
		background-color: $today-bg-color;
		display: flex;
		flex-direction: column
	}

	.box {
		width: 40px;
		height: 50px;
		border: 1px solid red;

		.text {
			width: 40px;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
</style>
